<template>
  <div class="g-bd">
    <div class="main f-fl">
      <div class="song-wrap" v-if="songDetail">
        <!-- 歌曲照片 -->
        <div class="cvrwrap f-fl">
          <div class="u-cover">
            <img :src="songDetail.al.picUrl + '?param=130y130'" alt="" />
            <span class="msk"></span>
          </div>
          <div class="outer-link">
            <i class="u-icn"></i>
            <a href="">生成外链播放器</a>
          </div>
        </div>
        <!-- 歌曲详细内容 -->
        <div class="detail f-fr">
          <div class="hd">
            <div class="u-icn"></div>
            <div class="tit">{{ songDetail.name }}</div>
          </div>
          <!-- 歌手 -->
          <div class="des">
            歌手:
            <span>
              <router-link
                :to="'/artist?id=' + art.id"
                :title="artistTitle"
                v-for="(art, i) in songDetail.ar"
                :key="art.id"
                >{{ art.name
                }}<span class="line" v-if="i !== songDetail.ar.length - 1">/</span></router-link
              ></span
            >
          </div>
          <!-- 专辑 -->
          <div class="des">
            所属专辑:<span>
              <router-link :to="'/album?id=' + songDetail.al.id">{{
                songDetail.al.name
              }}</router-link></span
            >
          </div>
          <!-- 操作按钮 -->
          <div class="tmhi-btn">
            <a
              href="javascript:void(0);"
              class="play u-btn2"
              title="播放"
              @click="playList(songDetail)"
              ><i><em class="icon-play u-btn2"></em>播放</i></a
            >
            <a
              href="javascript:void(0);"
              class="add u-btn2"
              title="添加到播放列表"
              @click="addToPlayList(songDetail)"
            ></a>
            <a href="javascript:void(0);" class="subscribed-count u-btn2" @click="operationClick"
              ><i>收藏</i></a
            >
            <a href="javascript:void(0);" class="share-count u-btn2 btn2" @click="operationClick"
              ><i>分享</i></a
            >
            <a href="javascript:void(0);" class="download u-btn2 btn2" @click="operationClick"
              ><i>下载</i></a
            >
            <a href="javascript:void(0);" class="comment-count u-btn2 btn2" @click="operationClick"
              ><i>(143234)</i></a
            >
          </div>
          <!-- 歌词 -->
          <div class="lyric-content" v-if="lrc">
            <div class="cnt" v-html="lrc"></div>
            <div class="cnt" v-html="hideLrc" v-show="flat"></div>
            <div class="flat">
              <a href="javascript:void(0)" @click="flat = !flat"
                >{{ flat ? '收起' : '展开' }} <i class="u-icn" :class="flat ? 'u-icn-70' : ''"></i
              ></a>
            </div>
          </div>
        </div>
      </div>
      <Comment :id="songId" :type="0"></Comment>
    </div>
    <div class="aside f-fr">
      <h3 class="u-hd3">相似歌曲</h3>
      <ul class="singlist">
        <li v-for="song in simSong" :key="song.id">
          <div class="txt">
            <router-link :to="'/song?id=' + song.id" class="song">{{ song.name }}</router-link>
            <router-link :to="'/artist?id=' + song.artists[0].id" class="singer">{{
              song.artists[0].name
            }}</router-link>
            <!-- <a href="" class="song">{{song.name}} </a>
            <a href="" class="singer">{{song.artists[0].name}}</a> -->
          </div>
          <div class="opr">
            <a href="javascript:void(0);" class="u-icn2 ply" @click="playList(song)"></a
            ><a href="javascript:void(0);" class="u-icn2 add" @click="addToPlayList(song)"></a>
          </div>
        </li>
      </ul>
      <div class="download">
        <h3 class="u-hd3">网易云音乐多端下载</h3>
        <ul class="dllist">
          <li><a href="https://itunes.apple.com/cn/app/id590338362" class="ios"></a></li>
          <li><a href="https://music.163.com/api/pc/download/latest" class="pc"></a></li>
          <li><a href="https://music.163.com/api/android/download/latest2" class="aos"></a></li>
        </ul>
        <p>同步歌单，随时畅听320k好音乐</p>
      </div>
      <h3 class="u-hd3">用户wiki</h3>
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo.png" alt="" /> 补充或修改歌曲资料</a
      >
      <a href="" class="wiki-edit"
        ><img src="@/assets/images/obj_wo1.png" alt="" /> 用户wiki任务中心</a
      >
    </div>
  </div>
</template>

<script>
import Comment from '@/components/Comment/Comment.vue'
import { SongDetail, SongLriyc, SimiSong } from '@/api/song.js'
import { operationClick } from '@/utils/methods.js'
export default {
  components: { Comment },
  data() {
    return {
      // 歌曲id
      songId: '',
      // 歌曲详细
      songDetail: null,
      // 一开始就展示的歌词
      lrc: '',
      // 被遮住的歌词
      hideLrc: '',
      // 音标
      romalrc: '',
      // 展开、收起
      flat: false,
      // 相似歌曲
      simSong: null
    }
  },
  methods: {
    // 获取歌曲详情
    async getSongDetail() {
      const { data } = await SongDetail(this.$route.query.id)
      this.songDetail = data.songs[0]
      console.log(this.songDetail)
    },
    // 获取歌词
    async getLrc() {
      // /lyric?id=1960868406
      const { data } = await SongLriyc(this.$route.query.id)
      const templrc = data.lrc.lyric
      const reg = /\[.*?\]/g
      // templrc.replace(reg, '</br>')
      const templrcList = templrc.split(reg)
      this.lrc = templrcList.slice(0, 15).join('</br>')
      this.hideLrc = templrcList.slice(15).join('</br>')
      this.romalrc = data.romalrc.lyric
    },
    // 获取相似歌曲
    async getSimSong() {
      // /lyric?id=1960868406
      const { data } = await SimiSong(this.$route.query.id)
      this.simSong = data.songs
      this.simSong.forEach(item => {
        item.al = item.album
        item.dt = item.duration
      })
    },
    // 播放音乐
    playList(tracks) {
      const songidList = []
      let index = -1
      const songList = this.$store.state.Music.songList
      songList.forEach(item => {
        songidList.push(item.id)
      })
      if (songidList.includes(tracks.id)) {
        index = songidList.findIndex(item => item === tracks.id)
      } else {
        this.$store.commit('Music/pushSongList', tracks)
      }
      console.log('test100', index)
      console.log('test100', songList.length - 1)
      this.$store.commit('Music/setplayerSettingIndex', index == -1 ? songList.length - 1 : index)
    },
    // 添加到播放列表
    addToPlayList(tracks) {
      this.$store.commit('Music/pushSongList', tracks)
    },
    operationClick
  },
  computed: {
    // 处理歌手链接title属性
    artistTitle() {
      let title = ''
      const len = this.songDetail.ar.length
      this.songDetail.ar.forEach((art, i) => {
        if (i !== len - 1) {
          title += art.name + '/'
        } else {
          title += art.name
        }
      })
      return title
    }
  },
  created() {
    this.getSongDetail()
    this.getLrc()
    this.getSimSong()
    this.songId = this.$route.query.id
  },
  watch: {
    $route() {
      this.getSongDetail()
      this.getLrc()
      this.getSimSong()
      this.songId = this.$route.query.id
    }
  }
}
</script>

<style lang="less" scoped>
@import './SongDetail.less';
</style>
